<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        /* transform: translate(); */
        /* position: absolute; */
    }
</style>

<body>
    <div class="box"></div>
    <button class="btn1">test自定义动画</button>
    <button class="btn2">box水平移动，垂直</button>
    <button class="stop">停止动画</button>
    <script>
        $('.btn1').click(function () {
            // 执行 动画
            /* console.log($('.box').animate({
                width: 400
            }, 1000)); */
            $('.box').animate({
                width: 400
            }, 1000).animate({
                height: 500
            }, 5000)
        })
        $('.btn2').click(function () {
            $('.box').animate({
                // left: 200
                marginLeft: 200
            }, 10000)
        })
        $('.stop').click(function () {
            // 停止当前元素上的动画效果
            $('.box').stop()
        })

    </script>
</body>

</html>